<template>
  <view class="cu-card bg-white">
    <view class="header flex align-center justify-between">
      <text class="header-label header-label-left">当前期次：{{ no }}</text>
      <!-- <text class="header-label header-label-right">
                第{{index}}期
            </text> -->
    </view>
    <view class="content flex align-center justify-between">
      <view class="number-item" v-for="(item, idx) in numbers" :key="idx">
        {{ (item + '').padStart(2, '0') }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    numbers: {
      type: [Array],
      default: [0, 0, 0, 0, 0],
    },
    no: {
      type: [Number, String],
      default: 0,
    },
    index: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
.cu-card {
  padding: 20upx;
  width: 694upx;
  height: 214upx;
  background-color: #ffffff;
  border-radius: 20upx;
  box-shadow: 0upx 6upx 16upx 0upx rgba(12, 65, 132, 0.12);
}

.header {
  height: 34upx;
  line-height: 34upx;
  font-size: 24upx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}

.content {
  margin: 28upx 20upx;
  .number-item {
    width: 100upx;
    height: 100upx;
    line-height: 100upx;
    border-radius: 50upx;
    background-color: rgba(218, 38, 38, 1);
    color: #ffffff;
    text-align: center;
    font-size: 48upx;
  }
}
</style>
